<template>
  <div class="axis-container">
    <div class="imgArea">
      <img class="baseImg" src="../assets/birdview-base.png">
      <img class="balloon" src="../assets/birdview/balloon.png">
      <img class="balloon" src="../assets/birdview/balloon.png">
      <img class="bird" src="../assets/birdview/bird.png">
      <img class="bird" src="../assets/birdview/bird.png">
      <img class="bird" src="../assets/birdview/bird.png">
      <img class="bird" src="../assets/birdview/bird.png">
    </div>
    <div class="analysis">
      <div class="yard-analysis">
        <h3>体块围合院落形式分析</h3>
        <div class="items">
          <div class="item" v-for="i in yards" :key="i.index">
            <img :src="require(`../assets/birdview/yard${i.index}.png`)">
            <label>{{i.title}}</label>
            <p>{{i.text}}</p>
          </div>
        </div>
      </div>
      <div class="road-analysis">
        <h3>道路与院落相互关系分析</h3>
        <div class="items">
          <div class="item" v-for="i in roads" :key="i.index">
            <img :src="require(`../assets/birdview/road${i.index}.png`)">
            <label>{{i.title}}</label>
            <p>{{i.text}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Axis',
  data(){
    return{
      yards:[
        {
          index: 1,
          title: '三面围合形式',
          text: '体块三面围合形成院落，包围感较弱，开放性较好'
        },
        {
          index: 2,
          title: '四面围合形式',
          text: '体块从四个方向共同围合，院落围合感和内向性更强'
        },
        {
          index: 3,
          title: '三面“实围合”+一面“虚围合”形式',
          text: '保留了三面围合形式的开放性，廊桥、景观等非体块元素的“虚围合”则弥补了包围感的不足'
        }
      ],
      roads:[
        {
          index: 1,
          title: '道路深入院落到达尽头',
          text: '院落是树状道路网络的尽头，利于营造回归小家的归属感'
        },
        {
          index: 2,
          title: '道路穿越院落',
          text: '保证院落较好的通达性，赋予建筑与街道更多的交互可能性'
        },
        {
          index: 3,
          title: '道路从院落旁边经过',
          text: '避免道路流线与院落流线相互干扰；院落兼顾完整性与通达性，利于发展成为广场'
        }
      ]
    }
  }
}
</script>

<style scoped>
.axis-container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.imgArea{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: min(100vh, 55vw);
  overflow: hidden;
}


img.baseImg{
  width: 100%;
}

img.balloon, img.bird{
  position: absolute;
}

img.balloon:nth-child(2){
  transform: rotate(-10deg);
  width: 25%;
  top: -3%;
  right: -3%;
  animation: float2 4s linear infinite 1s;
}
img.balloon:nth-child(3){
  transform: rotate(30deg);
  width: 7%;
  top: 5%;
  left: 6%;
  animation: float3 4s linear infinite 3s;
}

img.bird:nth-child(4){
  transform: rotate(20deg);
  width: 7%;
  top: 70%;
  right: 15%;
  animation: float4 4s linear infinite 2s;
}
img.bird:nth-child(5){
  transform: rotate(5deg) rotateY(180deg);
  width: 4%;
  top: 20%;
  left: 25%;
  animation: float5 4s linear infinite 1s;
}
img.bird:nth-child(6){
  transform: rotate(5deg) rotateY(180deg);
  width: 2%;
  top: 20%;
  left: 15%;
  animation: float6 4s linear infinite 3s;
}
img.bird:nth-child(7){
  transform: rotate(15deg) rotateY(180deg);
  width: 2%;
  top: 35%;
  left: 8%;
  animation: float7 4s linear infinite 1s;
}

@keyframes float2 {
  25%{
    top: -6%;
  }
  75%{
    top: 0;
  }
}
@keyframes float3 {
  25%{
    top: 2%;
  }
  75%{
    top: 8%;
  }
}
@keyframes float4 {
  25%{
    top: 67%;
  }
  75%{
    top: 73%;
  }
}
@keyframes float5 {
  25%{
    top: 17%;
  }
  75%{
    top: 23%;
  }
}
@keyframes float6 {
  25%{
    top: 17%;
  }
  75%{
    top: 23%;
  }
}
@keyframes float7 {
  25%{
    top: 32%;
  }
  75%{
    top: 38%;
  }
}

.analysis{
  display: flex;
  flex-direction: column;
  width: 90%;
  position: relative;
}

.yard-analysis, .road-analysis{
  width: 100%;
  position: relative;
  margin-top: 2rem;
}

.yard-analysis > h3, .road-analysis > h3{
  display: flex;
  align-items: center;
  width: 100%;
  height: fit-content;
  position: relative;
  font-weight: 800;
  font-size: 1.5rem;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-radius: 8px 0 0 8px;
  color: white;
}

.yard-analysis > h3{
  background: linear-gradient(to right, var(--green), rgba(255,255,255,0));
}
.road-analysis > h3{
  background: linear-gradient(to right, var(--purple), rgba(255,255,255,0));
}

.items{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.items > .item{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}

.items > .item > img{
  width: 80%;
  margin: 0.5rem 0;
  transition: all 0.5s;
}

.items > .item > label{
  width: 100%;
  margin: 0.5rem 0;
  font-weight: 600;
}

.items > .item > p{
  width: 100%;
}

.items > .item:hover > img{
  width: 100%;
  transition: all 0.5s;
}

.yard-analysis > .items > .item > label{
  color: var(--green);
}
.road-analysis > .items > .item > label{
  color: var(--purple);
}

@media screen and (max-width: 767px) {
  .items{
    flex-direction: column;
    align-items: center;
  }
  .items > .item{
    width: 90%;
    margin: 1rem 0;
  }
}

</style>